﻿@{
    Layout = null;
}
@using NB.MGJ.Model
<link href="~/Content/MarketCss/CreateActivities.css" rel="stylesheet" />
<style>
    .modal-body video {
        width: 100%;
        height: 100%;
        border-radius: 4px;
    }
</style>
<div class="centerPageContent">
    <div class="module">
        <div>
            <img src="~/Content/webImgs/Market/CreateActivities/nineGe.png" />

          
            <a class="QrCode"><img src="~/Content/webImgs/Market/CreateActivities/CodeQR/Turntable.png" /></a>
        </div>
        <div class="fr">
            <h2 class="specifications">九宫格</h2>
            <div class="font12"> 新品促销利器，可以设置不同奖品、不同中奖概率，冲新品销量，订购新品后参与抽奖。可配置中奖几率，玩法多变！</div>
            <div class="merits">
                <div>一、吸粉 粘粉 </div>
                <div>二、省人工提升效率</div>
                <div>三、自动发送奖励  </div>
            </div>
            <div>
                <a id="GoldEdition" class="btn btn-success btn-css" onclick="$.MGJ.Common.loadurl(this, '/Market/TurntableActivity?ActivityType=1&oper=add');">
                    在线开通
                </a>
            </div>
            <a class="green" data-toggle="modal" data-target="#vedioModal" onclick="changeVedioUrl('UploadFile/jgg.mp4')">查看创建教程</a>
        </div>
    </div>
    <div class="module">
        <div>
            <img src="~/Content/webImgs/Market/CreateActivities/getRedPack.png" />
            <a class="QrCode"><img src="~/Content/webImgs/Market/CreateActivities/CodeQR/red.png" /></a>
        </div>
        <div class="fr">
            <h2 class="specifications">抢红包</h2>
            <div class="font12">红包营销吸粉利器，扫码参与抢红包。支持关注后参与，积累老用户，日涨粉过千不是问题。可配置中奖几率，玩法多变！</div>
            <div class="merits">
                <div>一、吸粉 粘粉 </div>
                <div>二、售后抢红包</div>
                <div>三、自动发送 </div>
            </div>
            <div>
                <a id="StandardEdition" class="btn btn-success btn-css" onclick="$.MGJ.Common.loadurl(this, '/Market/RPActivity?ActivityType=2&oper=add');">
                    在线开通
                </a>
            </div>
            <a class="green" data-toggle="modal" data-target="#vedioModal" onclick="changeVedioUrl('UploadFile/qhb.mp4')">查看创建教程</a>
        </div>
    </div>
    <div class="module">
        <div>
            <img src="~/Content/webImgs/Market/CreateActivities/goldEgg.jpg" />
            <a class="QrCode"><img src="~/Content/webImgs/TraceSource/ExperienceCenter/qrcode.png" /></a>
        </div>
        <div class="fr">
            <h2 class="specifications">砸金蛋</h2>
            <div class="font12"> 在品牌营销必争、万家红包齐爆发的节点,蒙牛却“别有用心”,机智地推出独家“牛运”冠名的红包,与其他品牌的红包营销明显区隔</div>
            <div class="merits">
                <div>一、吸粉 粘粉 </div>
                <div>二、售后抢红包</div>
                <div>三、自动发送 </div>
            </div>
            <div>
                <a id="PlatinumEdition" class="btn btn-success btn-css" onclick="$.MGJ.Common.loadurl(this, '/Market/GoldEggsActivity?ActivityType=3&oper=add');">
                    在线开通
                </a>
            </div>
            <a class="green" href="#">查看创建教程</a>
        </div>
    </div>
    <div class="module">
        <div>
            <img src="~/Content/webImgs/Market/CreateActivities/gogoCard.png" />
            <a class="QrCode"><img src="~/Content/webImgs/TraceSource/ExperienceCenter/qrcode.png" /></a>
        </div>
        <div class="fr">
            <h2 class="specifications">刮刮卡</h2>
            <div class="font12"> 在品牌营销必争、万家红包齐爆发的节点,蒙牛却“别有用心”,机智地推出独家“牛运”冠名的红包,与其他品牌的红包营销明显区隔</div>
            <div class="merits">
                <div>一、吸粉 粘粉 </div>
                <div>二、售后抢红包</div>
                <div>三、自动发送 </div>
            </div>
            <div>
                <a id="DiamondEdition" class="btn btn-default btn-css" onclick="$.L.msgWarning('该活动尚未开启，敬请期待！')">
                    在线开通
                </a>
            </div>
            <a class="green" href="#">查看创建教程</a>
        </div>
    </div>
</div>
<div id="vedioModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="myModalLabel">营销活动视频教程</h5>
            </div>
            <div class="modal-body">
                <video controls="controls" id="MarketVideo">
                    <source src="" type="video/mp4" />
                    <source src="" type="video/webm" />
                    <source src="" type="video/ogg" />
                    您的浏览器不支持该视频,请使用谷歌浏览器！
                </video>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    var MarketVideo = document.getElementById("MarketVideo");
    function AddRedBao() {
        $.MGJ.Common.loadurl(this, '/Market/RPActivity?ActivityType=2&oper=add');
    }
    function changeVedioUrl(url) {

        url = url || 'https://static.gethover.com/build/images/media/hover-passport-1080p-b301b95feb.mp4';
        $('#MarketVideo').attr('src', url);
    }

    $('#vedioModal').on('hidden.bs.modal', function (e) {
        if (!MarketVideo.paused)
            MarketVideo.pause();
    })
    $('#vedioModal').on('shown.bs.modal', function (e) {
        if (MarketVideo.paused)
            MarketVideo.play();
    })
   
</script>